<template>
    <div class="">
        <div class="menu-box">

            <div class="pan-info-box">
                <p class="user-name">136****3207</p>
                <capacity-article :capacity="panCapacity" :used="panUsed"></capacity-article>
            </div>
            <div class="menu-list">
                <ul>
                    <li class="text-center" @click="changePanUsed()">
                        <menu-button content="担当团队"></menu-button>
                    </li>
                    <li class="text-center" :class="checkCurrentPath('uploadList')" @click="goToPage('uploadList')">
                        <menu-button content="正在上传"></menu-button>
                    </li>
                    <li class="text-center" :class="checkCurrentPath('downloadList')" @click="goToPage('downloadList')">
                        <menu-button content="正在下载"></menu-button>
                    </li>
                    <li class="text-center" :class="checkCurrentPath('overList')" @click="goToPage('overList')">
                        <menu-button content="传输完成"></menu-button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content-box">
            <router-view class="content"></router-view>
        </div>
    </div>
</template>

<script>
  import CapacityArticle from '@/components/CapacityArticle.vue'
  import MenuButton from '@/components/MenuButton.vue'

  export default {
    name: "dynamic",
    components:{
      CapacityArticle,
      MenuButton
    },
    data(){
      return{
        panCapacity:140,
        panUsed:20
      }
    },
    methods:{
      changePanUsed:function () {
        this.panUsed = this.panUsed + 10
      },
      changePanCapacity:function () {
        this.panCapacity = this.panCapacity + 100
      },
      checkCurrentPath: function (path) {
        if (this.$route.path.indexOf(path) > -1) {
          return 'menu-active'
        } else {
          return ''
        }
      },
      goToPage: function (path) {
        if (this.$route.path !== '/dynamic/' + path) {
          this.$router.push({
            path: '/dynamic/' + path
          })
        }
      }

    }
  }
</script>

<style scoped lang="css" src="@/assets/css/content-menu.css">

</style>

<style scoped>
    .pan-info-box{
        width: 200px;
        padding-top: 10px;
        margin:20px 10px;
        height: 70px;
        line-height: 70px;
        padding-left: 25px;
        box-sizing: border-box;
    }

    .user-name{
        height: 30px;
        line-height: 30px;
    }

</style>
